<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 这段代码一定要加，不然整个页面会被缩放 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../css/weui.css" />
		<link rel="stylesheet" type="text/css" href="../css/weuix.css" />
		<script src="../js/vue/vue-test.js"></script>
		<script src="../js/weui/iscroll-lite.js"></script>
		<script src="../js/weui/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/weui/zepto.weui.js" type="text/javascript" charset="utf-8"></script>

		<script>
			$(function() {
				// TagNav('#tagnav', {
				// 	type: 'scrollToNext',
				// 	curClassName: 'weui-state-active',
				// 	index: 0
				// });

				$('#nav').tab({
					defaultIndex: 1,
					activeClass: "bg-blue",
					onToggle: function(index) {
						FMVue.checkNav(index);
					}
				});

				$("#season").select({
					title: "选择赛季",
					items: FMVue.season,
					onChange: function() {
						FMVue.checkSeasonFormData.title = $("#season").attr("value");
						FMVue.checkSeasonFormData.value = $("#season").attr("data-values");
						FMVue.checkNav();
					}
				});

			})

			// function selectSeason() {
			// 	FMVue.checkSeasonFormData.title = $("#season").attr("value");
			// 	FMVue.checkSeasonFormData.value = $("#season").attr("data-values");
			// 	FMVue.checkNav();
			// };
		</script>

		<style type="text/css">
			.weui-flex__item_update {
				-webkit-box-flex: 3;
				-webkit-flex: 3;
				flex: 3;
			}
		</style>

	</head>
	<body background="../img/zerotwo.jpg">
		<div id="fm">
			<div class="container">
				<div class="weui-tab" style="height:44px;" id="nav">
					<div class="weui-tab-nav" style="margin-top: 5px;border: 2px solid #10aeff;border-radius: 10px;">
						<a href="javascript:" class="weui-navbar__item weui-nav-blue"> 总榜 </a>
						<a href="javascript:" class="weui-navbar__item weui-nav-blue"> 本赛季 </a>
						<a href="javascript:" class="weui-navbar__item weui-nav-blue">
							<div class="weui-cell__hd"><label for="season" class="weui-label"></label></div>
							<div class="weui-cell__bd">
								<input class="weui-input" style="text-align: center;" id="season" type="text"
									value="切换赛季">
							</div>
						</a>
					</div>
				</div>


				<div class="weui-flex" style="text-align: center;">
					<div class="weui-flex__item">
						<div style="margin-top: 40px;">
							<img :src="playerData[1].imgUrl" style="width: 60px;height: 60px;">
							<br>
							{{playerData[1].ID | idFilters}}
							<br>
							<span style="color: #A6A4A5;"><b>{{playerData[1].Kill}}</b></span>淘汰
						</div>
					</div>
					<div class="weui-flex__item" style="margin-top: 20px;">
						<div style="text-align: center;">
							<img :src="playerData[0].imgUrl" style="width: 60px;height: 60px;">
							<br>
							{{playerData[0].ID | idFilters}}
							<br>
							<span style="color: #e68600;"><b>{{playerData[0].Kill}}</b></span>淘汰
						</div>
					</div>
					<div class="weui-flex__item" style="margin-top: 50px;">
						<div style="text-align: center;">
							<img :src="playerData[2].imgUrl" style="width: 60px;height: 60px;">
							<br>
							{{playerData[2].ID | idFilters}}
							<br>
							<span style="color: #f0a979;"><b>{{playerData[2].Kill}}</b></span>淘汰
						</div>
					</div>
				</div>

				<div style="background-color: white;margin: 5px;border-radius: 20px;">
					<div
						style="padding-top: 10px;background-color: white;margin-top: 20px;border-radius: 20px;height:60px;">
						<div class="weui-flex"
							style="box-shadow: 2px 3px 10px 0px #aaa;border-radius: 20px;margin: 10px;">
							<div class="weui-flex__item" style="margin-left: 5px;margin-top: 5px;font-size: 15px;">
								<span style="color: #4db8a4;"><b>我的<br>战绩</b></span>
							</div>
							<div class="weui-flex__item_update"
								style="margin-left: -30px;line-height: 60px;font-size: 0.79rem;">
								{{MyData.ID}}&nbsp;淘汰数{{MyData.Kill}}&nbsp;累计伤害{{MyData.Damage}}
							</div>
							<div class="weui-flex__item"
								style="line-height: 60px;font-size: 10px;text-align:right;margin-right: 10px;">
								<span style="color: #4db8a4;"><b>第{{MyData.rank}}名</b></span>
							</div>
						</div>
					</div>
					<div style="margin-top: 50px; height: 30rem;">
						<table>
							<thead>
								<tr>
									<th>排名</th>
									<th>选手</th>
									<th>场次</th>
									<th>伤害</th>
									<th>KD</th>
									<th>淘汰</th>
								</tr>
							</thead>
							<tbody>

								<tr v-for="item,index in playerData">
									<td title="排名">{{index+1}}</td>
									<td title="选手">{{item.ID | idFilters}}</td>
									<td title="场次">{{item.Session}}</td>
									<td title="伤害">{{item.Damage}}</td>
									<td title="KD">{{item.KD}}</td>
									<td title="淘汰">{{item.Kill}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var FMVue = new Vue({
			el: "#fm",

			data: function() {
				return {
					// 后台传到这里的数据一定要是排好序的顺序，我在前台没有做任何排序的操作，并且数据展示是基于已经排好序的数据
					playerData: [],

					MyData: {
						ID: 'FM_1',
						Kill: '20',
						Damage: '2000',
						KD: '20',
						rank: '',
					},

					checkSeasonFormData: {
						value: '',
						title: '',
					},

					season: [{
						value: '1',
						title: '第一赛季'
					}, {
						value: '2',
						title: '第二赛季'
					}, {
						value: '3',
						title: '第三赛季'
					}, ]
				}
			},

			methods: {
				// 切换nav
				checkNav: function(index, value) {
					if (index == '0') {
						this.playerData = [{
							ID: 'FM_1',
							Kill: '20',
							Damage: '2000',
							KD: '20',
							Session: '20',
							imgUrl: "../img/SG.png"
						}, {
							ID: 'FM_2',
							Kill: '19',
							Damage: '1900',
							KD: '19',
							Session: '19',
							imgUrl: "../img/Moon.png"
						}, {
							ID: 'FM_3',
							Kill: '18',
							Damage: '1800',
							KD: '18',
							Session: '18',
							imgUrl: "../img/R1Se.png"
						}, {
							ID: 'FM_4',
							Kill: '17',
							Damage: '1700',
							KD: '17',
							Session: '17',
							imgUrl: "../img/VLK.png"
						}]
					} else if (index == '1') {
						this.playerData = [{
							ID: 'FM_4',
							Kill: '10',
							Damage: '1000',
							KD: '10',
							Session: '10',
							imgUrl: "../img/VLK.png"
						}, {
							ID: 'FM_3',
							Kill: '9',
							Damage: '900',
							KD: '9',
							Session: '9',
							imgUrl: "../img/R1Se.png"
						}, {
							ID: 'FM_2',
							Kill: '8',
							Damage: '800',
							KD: '8',
							Session: '8',
							imgUrl: "../img/Moon.png"
						}, {
							ID: 'FM_1',
							Kill: '7',
							Damage: '700',
							KD: '7',
							Session: '7',
							imgUrl: "../img/SG.png"
						}]
					} else {
						// 这里的if判断是要放在后台去做的，根据前台传到后台的赛季值来返回赛季数据，因为我是纯前端所以就在前台做了
						if (this.checkSeasonFormData.value == '1') {
							this.playerData = [{
								ID: 'FM_1',
								Kill: '7',
								Damage: '700',
								KD: '7',
								Session: '7',
								imgUrl: "../img/SG.png"
							}, {
								ID: 'FM_2',
								Kill: '6',
								Damage: '600',
								KD: '6',
								Session: '6',
								imgUrl: "../img/Moon.png"
							}, {
								ID: 'FM_3',
								Kill: '5',
								Damage: '500',
								KD: '5',
								Session: '5',
								imgUrl: "../img/R1Se.png"
							}, {
								ID: 'FM_4',
								Kill: '4',
								Damage: '400',
								KD: '4',
								Session: '3',
								imgUrl: "../img/VLK.png"
							}]
						} else if (this.checkSeasonFormData.value == '2') {
							this.playerData = [{
								ID: 'FM_1',
								Kill: '6',
								Damage: '600',
								KD: '6',
								Session: '6',
								imgUrl: "../img/SG.png"
							}, {
								ID: 'FM_2',
								Kill: '5',
								Damage: '500',
								KD: '5',
								Session: '5',
								imgUrl: "../img/Moon.png"
							}, {
								ID: 'FM_3',
								Kill: '4',
								Damage: '400',
								KD: '4',
								Session: '4',
								imgUrl: "../img/R1Se.png"
							}, {
								ID: 'FM_4',
								Kill: '3',
								Damage: '300',
								KD: '3',
								Session: '3',
								imgUrl: "../img/VLK.png"
							}]
						} else {
							this.playerData = [{
								ID: 'FM_4',
								Kill: '10',
								Damage: '1000',
								KD: '10',
								Session: '10',
								imgUrl: "../img/VLK.png"
							}, {
								ID: 'FM_3',
								Kill: '9',
								Damage: '900',
								KD: '9',
								Session: '9',
								imgUrl: "../img/R1Se.png"
							}, {
								ID: 'FM_2',
								Kill: '8',
								Damage: '800',
								KD: '8',
								Session: '8',
								imgUrl: "../img/Moon.png"
							}, {
								ID: 'FM_1',
								Kill: '7',
								Damage: '700',
								KD: '7',
								Session: '7',
								imgUrl: "../img/SG.png"
							}]
						}
					}

					// 切换赛季的同时更新我的战绩
					for (var i = 0; i < this.playerData.length; i++) {
						if (this.MyData.ID == this.playerData[i].ID) {
							this.MyData.rank = i + 1;
						}
					}
				}
			},

			created: function() {
				// 初始化页面的时候就要把值赋好，正常来说这里应该是进行后台查询，因为是纯前端，所以选择直接赋值
				this.playerData = [{
					ID: 'FM_4',
					Kill: '10',
					Damage: '1000',
					KD: '10',
					Session: '10',
					imgUrl: "../img/VLK.png"
				}, {
					ID: 'FM_3',
					Kill: '9',
					Damage: '900',
					KD: '9',
					Session: '9',
					imgUrl: "../img/R1Se.png"
				}, {
					ID: 'FM_2',
					Kill: '8',
					Damage: '800',
					KD: '8',
					Session: '8',
					imgUrl: "../img/Moon.png"
				}, {
					ID: 'FM_1',
					Kill: '7',
					Damage: '700',
					KD: '7',
					Session: '7',
					imgUrl: "../img/SG.png"
				}]

				for (var i = 0; i < this.playerData.length; i++) {
					if (this.MyData.ID == this.playerData[i].ID) {
						this.MyData.rank = i + 1;
					}
				}
			},
			
			// 过滤器
			filters:{
				idFilters:function(val){
					if(val.length>14){
						return val.substring(0,11).concat("...")
					}else{
						return val;
					}
				}
			}
		})
	</script>
</html>
